calculator template html css

116

calculator template html css - 

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    h1{
      text-align: center;
      margin-top: 0.67em;
      margin-bottom: 0.67em;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      margin: auto;
      width: 25%;
      padding: 10px;
      border: 1px solid #f2f2f2;
      -webkit-box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
         -moz-box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
              box-shadow: 1px 1px 4px 0px rgba(176,176,176,1);
      background-color: #fff;
      height: 450px;
      background-color: #F8F8F8;
    }
    .header{
      background-color: #81C784;
      padding: 10px;
      color: #fff;
      text-align: center;
    }
    .result{
      font-size: 24px;
      padding: 24px 5px;
      font-weight: 700;
      text-align: right;
      width: 96%;
      border: none;
      background-color: #F8F8F8;
    }
    .first-row,
    .second-row,
    .third-row,
    .fourth-row,
    .conflict
    {
      display: inline-block;
      width: 100%;
    }
    .global{
     padding: 15px;
     font-weight: bold;
     font-size: 16px;
     border: none;
     border-radius: 3px;
     background-color: #F2F2F2;
     float: left;
     width: 23.5%;
     margin: 0 2px;
     /*border: 1px solid #000;*/
    }
    .conflict .left,
    .conflict .right{
      float: left;
      position: relative;
    }
    .left{
      width: 74%;
    }
    .right{
      width: 24%;
    }
    .big{
      padding: 15px;
      font-weight: bold;
      font-size: 16px;
      border: none;
      border-radius: 3px;
      background-color: #F2F2F2;
      float: left;
      width: 64.5%;
      margin: 0 2px;
    }
    .small{
      padding: 15px;
      font-weight: bold;
      font-size: 16px;
      border: none;
      border-radius: 3px;
      background-color: #F2F2F2;
      float: left;
      width: 31.5%;
      margin: 0 2px;
    }
    .plus{
      height: 105px;
      width: 100%;
    }
    .green{
      background-color: #81C784;
    }
    .red{
      background-color: #F50258
    }
    .grey{
      background-color: #F2F2F2;
    }
    .white-text{
      color: #fff;
    }
    .top-margin{
      margin-top: 4px;
    }

  </style>
</head>
<body>

  <h1>Calculator Design Using HTML Layout</h1>
  <div class="container">
    <div class="header">Calculator</div>
    <input type="text" class="result">
    <div class="first-row">
      <input type="button" name="" value="√" class="global">
      <input type="button" name="" value="(" class="global">
      <input type="button" name="" value=")" class="global">
      <input type="button" name="" value="%" class="global">
    </div>
    <div class="second-row">
      <input type="button" name="" value="7" class="global">
      <input type="button" name="" value="8" class="global">
      <input type="button" name="" value="9" class="global">
      <input type="button" name="" value="/" class="global">
    </div>
    <div class="third-row">
      <input type="button" name="" value="4" class="global">
      <input type="button" name="" value="5" class="global">
      <input type="button" name="" value="6" class="global">
      <input type="button" name="" value="X" class="global">
    </div>
    <div class="fourth-row">
      <input type="button" name="" value="1" class="global">
      <input type="button" name="" value="2" class="global">
      <input type="button" name="" value="3" class="global">
      <input type="button" name="" value="-" class="global">
    </div>
    <div class="conflict">
      <div class="left">
        <input type="button" name="" value="0" class=" big">
        <input type="button" name="" value="." class=" small">
        <input type="button" name="" value="Del" class=" red small white-text top-margin">
        <input type="button" name="" value="=" class=" green white-text big top-margin">
      </div>
      <div class="right">
        <input type="button" name="" value="+" class="global grey plus">
      </div>
    </div>
  </div>
</body>
</html>

Comments

Submit
0 Comments

More Questions

radio buttons htmlfont awesome cdn link font awesome 5 cdn
Navbar Bootstrap 5boostrap 5.1 nav div table bootstrap 4
font awesome iconsnavba using bootstrap bootstrap flex vertical align
bootstrap flex alignbootstrap cdn link Bootstrap CSS CDN
bootstrap center divsflexbox bootstrap 4 bootstrap color class
flex direction column bootstrap 4bootstrap 4 center div justify-content-between bootstrap 4
bootstrap text warning colorbootstrap text color align items center bootstrap
html - blank space at leftvisual studio code html template shortcut jinja2 iterate dict
html images with linklaravel raw html simple.css cdn
html button with linkandroid strings plural bootstrap rounded button
html ms-text-size-adjustangular foreach register a service worker
html to pdf npmhtml pre-populate input bootstrap desable autocomplete hatml
socket.io cdnjs onclick redirect font awesome animate
json placeholderalternative image in img tag divider bootsrap
get city from location htmlmailto subject roboto
bootstrap cardhow to redirect to gmail with a tag html aos animation
C
CSS
Objective-C
PHP
Java
C++
Javascript
Html
Python
SQL
Swift
Ruby
Go
R
TypeScript
Kotlin
Assembly
VBA
Scala
Rust
Elixir
Dart
Haskell
Perl
Fortran
Matlab
Scheme
Julia
Lua
Delphi
Pascal
Solidity
BASIC
ActionScript
Csharp